<template>
  <div class="qm_editor" :id="curId+'Root'+curIndex">
    <!-- <textarea name="" v-model="value" @input="inputAction"></textarea> -->
    
  </div>
</template>
<script>
import { defineComponent, onMounted, reactive, toRefs } from 'vue';
import E from 'wangeditor';
export default defineComponent({
  props: {
    msg: String,
    curId: String,
    curIndex: String | Number
  },
  setup(props, context) {
    const data = reactive({
      value: ''
    });
    console.log('ppp', props);
    const {curId, curIndex} = props; 
    const inputAction = () => {
      // console.log(data.value);
      context.emit('input-value', data.value)
    };
    onMounted(() => {
      const ele = curId + 'Root' + curIndex;
      // console.log(ele);
      const editor = new E('#' + ele);
      
      // editor.txt.html('<li>设置文本<li>');
        
      
      editor.config.onchange = function (newHtml) {
        console.log("change 之后最新的 html", `<li>${newHtml}</li>`);
        // console.log(newHtml.replace(/<p>(.*?)<\/p>/g, '<li>$1</li>'))
        let str = newHtml.replace(/<p>(.*?)<\/p>/g, '<li>$1</li>')
        context.emit('input-value', {value: str, index: curIndex});
      };
      editor.create()
      let resumeData = window.localStorage.getItem('RESUME_DATA');
      if (resumeData) {
        let resume = JSON.parse(resumeData).list;
       console.log('work----', resume[2].idName === 'work', !!resume[2].project);
        if (resume[1].idName === 'jineng' && curId === 'jineng' && !!resume[1].project) {
          editor.txt.html(resume[1].project?.value?.value);
        }
        if (resume[2].idName === 'work' && curId === 'work' && !!resume[2].project) {
          editor.txt.html(resume[2].project?.value?.value);
        }
        if (resume[3].idName === 'project' && curId === 'project' && !!resume[3].project) {
          editor.txt.html(resume[3].project?.value?.value);
        }
      }
      // 
    });
    return { ...toRefs(data), inputAction, curIndex }
  },

})
</script>